<template>
  <div class="register-container">
    <div class="particles-js" id="particles-js"></div>
    <div class="register-box">
      <div class="register-brand">
        <h2 class="brand-title">{{title}}</h2>
        <p class="brand-desc">校园监控信息管理系统</p>
      </div>
      <div class="register-form-container">
        <h3 class="form-title">账号注册</h3>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="svg-icon">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              @keyup.enter.native="handleRegister"
              prefix-icon="svg-icon"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              auto-complete="off"
              placeholder="请确认密码"
              @keyup.enter.native="handleRegister"
              prefix-icon="svg-icon"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <el-input
              v-model="registerForm.code"
              auto-complete="off"
              placeholder="请输入验证码"
              style="width: 66%"
              @keyup.enter.native="handleRegister"
              prefix-icon="svg-icon"
            >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="register-code">
              <img :src="codeUrl" @click="getCode" class="register-code-img"/>
            </div>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              type="primary"
              class="register-btn"
              @click.native.prevent="handleRegister"
            >
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="login-link">
          <p>已有账号？<router-link :to="'/login'">立即登录</router-link></p>
        </div>
      </div>
    </div>
    
    <div class="register-footer">
      <p>Copyright © 2023-2024 校园监控信息管理系统</p>
    </div>
  </div>
</template>

<script>
import { getCodeImg, register } from "@/api/login";

export default {
  name: "Register",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      title: process.env.VUE_APP_TITLE,
      codeUrl: "",
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: ""
      },
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: true
    };
  },
  created() {
    this.getCode();
  },
  mounted() {
    this.initParticles();
  },
  methods: {
    initParticles() {
      if (window.particlesJS) {
        window.particlesJS('particles-js', {
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: '#1890ff'
            },
            shape: {
              type: 'circle',
              stroke: {
                width: 0,
                color: '#000000'
              }
            },
            opacity: {
              value: 0.5,
              random: false,
              anim: {
                enable: false,
                speed: 1,
                opacity_min: 0.1,
                sync: false
              }
            },
            size: {
              value: 3,
              random: true,
              anim: {
                enable: false,
                speed: 40,
                size_min: 0.1,
                sync: false
              }
            },
            line_linked: {
              enable: true,
              distance: 150,
              color: '#1890ff',
              opacity: 0.4,
              width: 1
            },
            move: {
              enable: true,
              speed: 2,
              direction: 'none',
              random: false,
              straight: false,
              out_mode: 'out',
              bounce: false,
              attract: {
                enable: false,
                rotateX: 600,
                rotateY: 1200
              }
            }
          },
          interactivity: {
            detect_on: 'canvas',
            events: {
              onhover: {
                enable: true,
                mode: 'grab'
              },
              onclick: {
                enable: true,
                mode: 'push'
              },
              resize: true
            },
            modes: {
              grab: {
                distance: 140,
                line_linked: {
                  opacity: 1
                }
              },
              bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
              },
              repulse: {
                distance: 200,
                duration: 0.4
              },
              push: {
                particles_nb: 4
              },
              remove: {
                particles_nb: 2
              }
            }
          },
          retina_detect: true
        });
      } else {
        console.warn('particles.js not loaded');
        // 尝试动态加载particles.js
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js';
        script.onload = () => {
          this.initParticles();
        };
        document.head.appendChild(script);
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          })
        }
      });
    }
  }
};
</script>

<style lang="scss">
.register-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e5e6 100%);
  position: relative;
  overflow: hidden;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.register-box {
  display: flex;
  width: 850px;
  max-width: 90%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  z-index: 2;
  background-color: #fff;
  margin-bottom: 60px;
}

.register-brand {
  width: 40%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    bottom: -100px;
    right: -100px;
  }
  
  &::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    top: -80px;
    left: -80px;
  }
  
  .brand-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  
  .brand-desc {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 30px;
  }
}

.register-form-container {
  width: 60%;
  padding: 40px;
  background-color: #fff;
  
  .form-title {
    font-size: 24px;
    font-weight: 500;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
  }
}

.register-form {
  .el-input {
    height: 42px;
    
    input {
      height: 42px;
      padding-left: 40px !important; /* 增加左内边距，避免文字与图标重叠 */
      background: #f5f7fa;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      
      &:focus {
        border-color: #1890ff;
      }
    }
  }
  
  .input-icon {
    height: 16px;
    width: 16px;
    margin-left: 12px;
    color: #909399;
    z-index: 2;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .el-form-item {
    margin-bottom: 24px;
  }
}

.register-btn {
  width: 100%;
  height: 42px;
  border-radius: 4px;
  font-size: 16px;
  background: linear-gradient(to right, #1890ff, #40a9ff);
  border: none;
  transition: all 0.3s;
  
  &:hover {
    background: linear-gradient(to right, #0c7ad8, #1890ff);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  }
}

.register-code {
  width: 33%;
  height: 42px;
  float: right;
  
  img {
    height: 42px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #e9ecef;
  }
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #606266;
  
  a {
    color: #1890ff;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.register-footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #909399;
  font-size: 14px;
  z-index: 2;
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  .register-box {
    flex-direction: column;
    max-width: 95%;
  }
  
  .register-brand,
  .register-form-container {
    width: 100%;
  }
  
  .register-brand {
    padding: 30px 20px;
  }
  
  .register-form-container {
    padding: 30px 20px;
  }
}
</style>
